import React, { Component } from "react";
import "./index.less";
import { Input, Select, Cascader } from "antd";
import addressData from "../../config/cityConfig";
const { Option } = Select;

export default class AddnewAddress extends Component {
  selectAddress() {
    let addr = [];
    let province = Object.keys(addressData);
    for (let item in province) {
      const key = province[item];
      const cityList = [];
      if (addressData[key].length > 0) {
        for (let item1 in addressData[key]) {
          const obj = {
            value: addressData[key][item1],
            label: addressData[key][item1]
          };
          cityList.push(obj);
        }
      }
      const obj = {
        value: key,
        label: key,
        children: cityList
      };
      addr.push(obj);
    }

    return addr;
  }
  render() {
    const addr = this.selectAddress();
    return (
      <div>
        {/* 联系人： */}
        <div className="failure-content">
          <span className="ctitle">联系人：</span>
          <Input className="width-comment" placeholder="请填写联系人姓名" />
        </div>
        {/* 联系方式： */}
        <div className="failure-content">
          <span className="ctitle">联系方式：</span>
          <Select
            defaultValue="lucy"
            style={{ width: 120 }}
            // onChange={}
          >
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
          </Select>
          <Input
            className="width-comment put-phone"
            placeholder="请填写手机号"
          />
        </div>
        <div className="failure-content">
          <span className="ctitle">座机：</span>
          <Input className="width-comment" placeholder="请填写区号" />
          <Input
            className="width-comment get-phone"
            placeholder="请填写座机号"
          />
          <Input className="width-comment" placeholder="分机号（选填）" />
        </div>
        <div className="failure-content">
          <span className="ctitle">联系地址：</span>
          <Select
            defaultValue="lucy"
            style={{ width: 120 }}
            // onChange={}
          >
            <Option value="jack">Jack</Option>
            <Option value="lucy">中国</Option>
          </Select>
          <Cascader
            options={addr}
            onChange={this.selectAddress.bind(this)}
            placeholder="请选择省市"
            style={{ width: 240, marginLeft: 10 }}
          />
        </div>
        <div className="failure-content">
          <span className="ctitle">详细地址：</span>
          <Input
            style={{ width: 490 }}
            placeholder="请填写详细地址，如街道名称，门牌号等信息"
          />
        </div>
      </div>
    );
  }
}
